import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:chatgreat/helper/helper.dart';
import 'package:chatgreat/helper/my_widget.dart';
import 'package:chatgreat/page/component/random_avatar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:image_picker/image_picker.dart';
import '../login/model/tourist_login_model.dart';
import 'avatar_selector.dart';
import 'button.dart';
import 'dialog.dart';

class AccountQuotaCard extends StatefulWidget {
  final File? avaterImageFile;
  final TouristLoginModel? userInfo;
  final VoidCallback? onPaymentReturn;
  final VoidCallback? onChangeAvaterReturn;
  final Function(String)? onChangeNameReturn;
  const AccountQuotaCard(
      {super.key,
      this.avaterImageFile,
      this.userInfo,
      this.onPaymentReturn,
      this.onChangeAvaterReturn,
      this.onChangeNameReturn});

  @override
  State<AccountQuotaCard> createState() => _AccountQuotaCardState();
}

class _AccountQuotaCardState extends State<AccountQuotaCard> {
  String nameRecord = '';

  @override
  Widget build(BuildContext context) {
    var width = (ScreenUtil().screenWidth - 13 * 2 - 11) / 2;

    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: 12.5,
        vertical: 20,
      ),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 6.5, right: 6.5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                buildAvatar(context),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(height: 5),
                      LayoutBuilder(builder: (context, viewport) {
                        var maxWidth = viewport.maxWidth - 65;
                        return Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            const SizedBox(width: 16),
                            Container(
                              constraints: BoxConstraints(maxWidth: maxWidth),
                              child: MyTextSingle(
                                  widget.userInfo?.name ?? '',
                                  19,
                                  Colors.white,
                                  FontWeight.normal),
                            ),
                            const SizedBox(width: 3),
                            InkWell(
                                // highlightColor: Colors.transparent,
                                //   splashColor: Colors.transparent,
                                onTap: () {
                                  showEditNameDialog(context);
                                },
                                child: Container(
                                    margin: const EdgeInsets.only(
                                        left: 16, right: 16, top: 8, bottom: 8),
                                    child: imgWidget(14, 14, 'name_edit')))
                          ],
                        );
                      }),
                      const SizedBox(height: 6),
                      Row(
                        children: [
                          const SizedBox(width: 16),
                          if (widget.userInfo != null)
                            InkWell(
                              onTap: () {
                                // context.push('/quota-usage-statistics');
                              },
                              child: Text(
                                'ID：${widget.userInfo?.myId ?? '-'}',
                                style: TextStyle(
                                  fontSize: 15,
                                  color: Colors.white.withOpacity(0.6),
                                ),
                              ),
                            ),
                        ],
                      ),
                      const SizedBox(height: 10),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 35, bottom: 13),
            width: double.infinity,
            height: 60,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/setting_huiyuan_bg.png'),
                fit: BoxFit.fill,
              ),
            ),
            child: Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 77.5, right: 6.5),
                  child: imgWidget(40, 23, 'setting_vip_icon'),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 10),
                  child: imgWidget(
                      (widget.userInfo?.isVip ?? 0) == 1 ? 175 : 114,
                      15,
                      (widget.userInfo?.isVip ?? 0) == 1
                          ? 'open_chat5.0_able'
                          : 'open_chat5.0'),
                ),
                const Spacer(),
                Visibility(
                  visible: (widget.userInfo?.isVip ?? 0) != 1,
                  child: GestureDetector(
                    onTap: () {
                      context.push('/payment').whenComplete(() {
                        if (widget.onPaymentReturn != null) {
                          widget.onPaymentReturn!();
                        }
                      });
                    },
                    child: Container(
                      width: 80,
                      height: 30,
                      margin: EdgeInsets.only(right: 10),
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage('images/mashang_kt_bg.png'),
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                onTap: () {
                  context.push('/integral');
                },
                child: Container(
                  width: width,
                  height: 64.w,
                  decoration: BoxDecoration(
                    color: const Color(0xFF333544),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      imgWidget(31.w, 31.w, 'jifen_icon'),
                      SizedBox(width: 13.w),
                      MyTextWeight('积分', 14.w, Colors.white.withOpacity(0.7),
                          FontWeight.w400),
                      SizedBox(width: 10.w),
                      MyTextWeight('${widget.userInfo?.diamond ?? 0}', 20.w,
                          Colors.white, FontWeight.w500),
                    ],
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  context.push('/setting/collection');
                },
                child: Container(
                  width: width,
                  height: 64.w,
                  decoration: BoxDecoration(
                    color: const Color(0xFF333544),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      imgWidget(31.w, 31.w, 'shoucang'),
                      SizedBox(width: 13.w),
                      MyTextWeight('收藏', 14.w, Colors.white.withOpacity(0.7),
                          FontWeight.w400),
                      SizedBox(width: 10.w),
                      MyTextWeight('${widget.userInfo?.collect ?? 0}', 19.w,
                          Colors.white, FontWeight.w500),
                    ],
                  ),
                ),
              )
            ],
          ),
          Container(
              margin: const EdgeInsets.only(top: 43, bottom: 18),
              alignment: Alignment.centerLeft,
              child: MyTextWeight('更多工具', 16, Colors.white, FontWeight.w400)),
          // Wrap(
          //   direction: Axis.horizontal,
          //   alignment: WrapAlignment.start,
          //   // spacing: 8.0,
          //   runSpacing: 44.w,
          //   children: buildWrapItem(),
          // ),
        ],
      ),
    );
  }

  Widget buildAvatar(BuildContext context) {
    if (isNotBlank(widget.userInfo?.portrait ?? '')) {
      return GestureDetector(
        onTap: () {
          if (widget.onChangeAvaterReturn != null) {
            widget.onChangeAvaterReturn!();
          }
        },
        child: SizedBox(
          width: 64,
          height: 64,
          child: Stack(
            children: [
              Positioned(
                bottom: 0,
                right: 0,
                left: 0,
                top: 0,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(32),
                  child: widget.avaterImageFile != null
                      ? Image.file(
                          widget.avaterImageFile!,
                          fit: BoxFit.fill,
                        )
                      : CachedNetworkImage(
                          imageUrl: widget.userInfo?.portrait ?? '',
                          fit: BoxFit.fill,
                        ),
                ),
              ),
              Positioned(
                  bottom: 0,
                  right: 0,
                  left: 0,
                  height: 20,
                  child: Center(
                      child: MyTextWeight(
                          '更换', 11, Colors.white, FontWeight.w500)))
            ],
          ),
        ),
      );
    }

    return GestureDetector(
      onTap: () {
        if (widget.onChangeAvaterReturn != null) {
          widget.onChangeAvaterReturn!();
        }
      },
      child: SizedBox(
        width: 64,
        height: 64,
        child: Stack(
          children: [
            widget.avaterImageFile != null
                ? ClipRRect(
                    borderRadius: BorderRadius.circular(32),
                    child:
                        Image.file(widget.avaterImageFile!, fit: BoxFit.fill))
                : imgWidget(64, 64, 'touxiang'),
            Positioned(
                bottom: 0,
                right: 0,
                left: 0,
                height: 20,
                child: Center(
                    child:
                        MyTextWeight('更换', 11, Colors.white, FontWeight.w500)))
          ],
        ),
      ),
    );
  }

  showEditNameDialog(BuildContext context) async {
    // nameRecord = widget.userInfo?.name ?? '';
    showAnimationDialog(
      context: context,
      transitionType: TransitionType.inFromTop,
      barrierDismissible: true,
      builder: (diaContext) => StatefulBuilder(builder: (diaContext, state) {
        return Dialog(
          elevation: 0,
          backgroundColor: Colors.transparent,
          child: Container(
            margin: const EdgeInsets.only(bottom: 50),
            width: 320,
            height: 236,
            decoration: BoxDecoration(
              color: const Color(0xFF333544),
              borderRadius: BorderRadius.circular(13),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Center(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 26),
                    child:
                        MyTextWeight('修改昵称', 18, Colors.white, FontWeight.w500),
                  ),
                ),
                Container(
                    alignment: Alignment.center,
                    margin: const EdgeInsets.only(top: 30, bottom: 18, left: 30, right: 30),
                    child: TextField(
                      scrollPadding: const EdgeInsets.all(0),
                      maxLength: 12,
                      maxLengthEnforcement: MaxLengthEnforcement.enforced,
                      cursorColor: Colors.white.withOpacity(0.6),
                      style: const TextStyle(
                          fontSize: 15,
                          fontWeight: FontWeight.normal,
                          color: Colors.white),
                      decoration: InputDecoration(
                          contentPadding: const EdgeInsets.only(left: 15, right: 15, top: 14, bottom: 14),
                          hintText: "这里输入你要修改的昵称...",
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(13),
                              borderSide: BorderSide(
                                  color: Colors.white.withOpacity(0.6), width: 1)),
                          focusedBorder: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(13),
                              borderSide: BorderSide(
                                  color: Colors.white.withOpacity(0.6), width: 1)),
                          hintStyle:
                              TextStyle(color: Colors.white.withOpacity(0.45))),
                      onChanged: (String text) {
                        nameRecord = text;
                      },
                    )),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Button(
                        title: '取消',
                        color: const Color(0xFF666666),
                        size: const ButtonSize(
                            height: 40, width: 125, fontSize: 16),
                        backgroundColor: const Color(0xFFEEEEEE),
                        borderRadius: 20,
                        onPressed: () {
                          diaContext.pop();
                        }),
                    const SizedBox(width: 12),
                    Button(
                        title: '确定',
                        color: Colors.white,
                        size: const ButtonSize(
                            height: 40, width: 125, fontSize: 16),
                        backgroundColor: const Color(0xFFEEEEEE),
                        borderRadius: 20,
                        gradient: const LinearGradient(
                          colors: [
                            Color(0xFF14E0EB),
                            Color(0xFF5988FC),
                          ],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ),
                        onPressed: () {
                          if (isBlank(nameRecord)) {
                            showErrorMessage('请输入要修改的昵称');
                            return;
                          }

                          context.pop();

                          if (widget.onChangeNameReturn != null) {
                            widget.onChangeNameReturn!(nameRecord);
                          }
                        }),
                  ],
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}
